Real time data updates: ASP.NET Core SignalR with React Js |
您所在的位置：网站首页 › blue flame labs › Real time data updates: ASP.NET Core SignalR with React Js |
Real time data updates: ASP.NET Core SignalR with React Js
|
Introduction: –
What is SignalR? SignalR is an open-source library that enables real-time web functionality to apps. SignalR enables the server to push content to clients instantly. All internet-connected applications are composed of servers and clients. Clients believe on servers for data, and their primary need is receiving data is through making Hypertext Transfer Protocol (HTTP) requests. Some client applications require real time data that changes frequently. With the help of ASP.NET Core SignalR we can create server-to-client remote procedure calls (RPCs). RPCs call functions on clients from the server-side code.SignalR can be used for: Applications that need real time updates from the server such as social networking, voting etc. Applications that need notifications such as email, games, etc. Real time dashboards, data monitoring and chat applications.Features of SignalR for ASP.NET Core: Handles client’s connection management automatically. Ability to send messages to all connected clients. For example, a chat room. Ability to send messages to specific clients or groups of clients. Scales to handle increasing traffic.Transports: SignalR supports the following techniques, for managing real-time communication: WebSockets Server-Sent Events Long Pollingthough any one of above transport techniques could be used. Based on the capabilities of the server and client SignalR automatically choose the best transport method. Hubs: The Hubs are used to stay the connection open between the server and client in SignalR. It is a high-level pipeline that allows the client and server to invoke the methods on each other. SignalR automatically handles the dispatching across machine boundaries that allows the server to call methods on the client and vice versa. Users: A user can be an individual, but it can also be a member of a group. Messages can be sent to the group, and all group members will get the massage. A single user can connect from multiple client applications. For example, the same user can use a mobile device and a web browser and get real-time updates on both at the same time. Groups: A group consists of one or more users. The server can create groups, add users to a group, and remove users from a group. A group has a specified name, which is a unique identifier of the group. That is, real-time notifications can be sent only to users within a named group. Built-in and Custom Protocols: ASP.NET Core SignalR comes with a new JSON message protocol that’s incompatible with earlier versions of SignalR. And, it has a second built-in protocol based on MessagePack, which is a binary protocol that has smaller payloads than the text-based JSON. If you want to implement a custom message protocol, ASP.NET Core SignalR has extensibility points that allow new protocols to be plugged in. SignalR Implementation with .NET Core and React Js Backend Implementation: Install Nuget package:
2. Create the Hub interface and classes:
Here we define the three methods: JoinGroup – To join create or join the group by passing the group name as parameter. SendMassageToAllClients – To send the notifications or massages to all the clients that have subscribed to this SignalR Hub. SendMassageToGroup – To send the massages to specific group.
3. Update the Program.cs file:
There are several possible configuration options that are available top-level SignalR configuration. Let’s see the common ones.
KeepAliveInterval:
When a client connects to the server, the connection is managed by sending ping requests to the clients at regular intervals. This setting controls the interval time span between the ping requests.
The default time span is 15 seconds. to detect a disconnection quicker you can make the time span shorter. Making it longer will save the bandwidth. So, you would decrease this interval when performance and resilience are important and you would increase it when you have to work with limited bandwidth.
MaximumReceiveMessageSize:
This setting handles the maximum size of a message that a client can send to the hub. It’s represented in bytes and the default, it’s 32 kilobytes.
This setting can be increased if you need to manage the large messages. But if your system doesn’t want to deal with a large quantity of small messages, then it makes sense to decrease this number to increase the performance.
To map the hub, configure the SignalR route pipeline as above snapshot.
Frontend Implementation: 1. Now to use SignalR in your React project, We will need a package @microsoft/signalr. It contains all the necessary implementations to connect to our hub and listen to requests. To install it run the following command: npm i –save @microsoft/signalr Declare useSate to set connection:
3. Here I we are connecting to the SignalR Hub using URL: https://localhost:7173/hubs/notifications – We already configured this URL Into backend program.cs file. I have stored this like REACT_APP_AUTOREFRESH=https://localhost:7173/hubs/notifications in Frontend env file. So, I have access it like process.env.REACT_APP_AUTOREFRESH.
4. To subscribe the backend SignalR methods: Here we used connection.on() method to listen the events from backend, I this We are passing server method “SendMassageToAllClients” as parameter and will print the received massage in console. Also, I am dynamically assigning the company name as group name to create the different groups of companies. For this I am calling “JoinGroup” method.(connection?.invoke (“JoinGroup” , Company Name); The use of “SendMassageToGroup” method to send massage or notification or email to the company specific groups.
5. To call the SignalR methods: You can call the methods like the below snapshot when you want to send a message on button click event or any other events. To send the massages to group we have to pass group name as parameter based on this name SignalR sends the message to a specific group.
Conclusion: We learned about what is the SignalR open-source library, its applications, features and how it Is useful for real time applications. – ex. to send the massages to a subscribed clients or group of clients using SignalR .NET Core with React Js.
|
【本文地址】